<!-- <time-countdown :timestamp="false" /> -->
<template>
  <div class="time-down">
    <!-- <span v-if="showDay" class="time-countdown__number">{{ state.d }}</span> -->
    <!-- <span v-if="showDay" class="time-countdown__splitor">{{ dayText }}</span> -->
    <span class="time-countdown__number">{{ state.h }}</span>
    <span class="time-countdown__splitor">:</span>
    <span class="time-countdown__number">{{ state.i }}</span>
    <span class="time-countdown__splitor">:</span>
    <span class="time-countdown__number">{{ state.s }}</span>
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from "vue";
import moment from "moment";

const props = withDefaults(
  defineProps<{
    // showDay?: boolean;
    // showColon?: boolean;
    // start?: boolean;
    // backgroundColor?: string;
    // fontSize?: number;
    // day?: number;
    // hour?: number;
    // minute?: number;
    // second?: number;
    timestamp: number;
  }>(),
  {
    // showDay: true,
    // showColon: true,
    // start: true,
    // backgroundColor: "",
    // color: "#333",
    // fontSize: 14,
    // splitorColor: "#333",
    // day: 0,
    // hour: 0,
    // minute: 0,
    // second: 0,
    timestamp: 0,
  }
);

const state = reactive({
  timer: <any>null,
  //   syncFlag: false,
  d: "00",
  h: "00",
  i: "00",
  s: "00",
  //   leftTime: 0,
  seconds: 0,
});

// const emit = defineEmits<{
//   //   (event: "on-notice", data: string): void;
//   (event: "timeup"): void;
// }>();

// const onClick = () => {
//   param.value = "abc_" + new Date().getTime();
//   // 触发事件
//   emit("on-notice", param.value);
// };

onMounted(() => {
  state.seconds = toSeconds(props.timestamp);
  // console.log(
  //   "timeDown onMounted",
  //   state.seconds,
  //   moment(props.timestamp).format("YYYY-MM-DD HH:mm:ss")
  // );

  clearInterval(state.timer);
  countDown();
  state.timer = setInterval(() => {
    state.seconds--;
    if (state.seconds < 0) {
      //   this.timeUp();
      return;
    }
    countDown();
  }, 1000 * 1);
});

onUnmounted(() => {
  clearInterval(state.timer);
});

const countDown = () => {
  let seconds = state.seconds;
  let [day, hour, minute, second] = [0, 0, 0, 0];
  if (seconds > 0) {
    day = Math.floor(seconds / (60 * 60 * 24));
    hour = Math.floor(seconds / (60 * 60)) - day * 24;
    minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
    second =
      Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
  } else {
    // this.timeUp();
  }

  state.d = "00";
  state.h = "00";
  state.i = "00";
  state.s = "00";

  if (day < 10) {
    state.d = "0" + day;
  } else if (day >= 10) {
    state.d = String(day);
  }
  if (hour < 10) {
    state.h = "0" + hour;
  } else if (hour >= 10) {
    state.h = String(hour);
  }
  if (minute < 10) {
    state.i = "0" + minute;
  } else if (minute >= 10) {
    state.i = String(minute);
  }
  if (second < 10) {
    state.s = "0" + second;
  } else if (second >= 10) {
    state.s = String(second);
  }
  //   console.log("countDown minute second", minute, second);
  //   console.log("countDown", state);
};

const toSeconds = (timestamp: number) => {
  // 传入的时间应该是未来的时间
  return (timestamp - Date.parse(String(new Date()))) / 1000; //parseInt(String(new Date().getTime() / 1000), 10);
};
</script>
<style lang="scss" scoped>
$font-size: 14px;
.time-down {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  &__splitor {
    margin: 0 2px;
    font-size: $font-size;
    color: #333;
  }

  &__number {
    border-radius: 3px;
    text-align: center;
    font-size: $font-size;
  }
}
</style>
